<template>
  <div class="container" ref="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as Cesium from 'cesium'

// 1.安装cesium
// 2、讲cesium目录下的Build/Cesium 的四个目录拷贝倒public

// 设置cesium默认视角
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(89.5, 20.4, 110.4, 61.2)

const cesiumContainer = ref(null)

onMounted(() => {
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    infoBox: false, // 关闭信息框
    geocoder: false, // 关闭搜索
    homeButton: false, // home按钮
    sceneModePicker: false, // 场景查看器的场景模式
    baseLayerPicker: false, // 图层选择器
    navigationHelpButton: false, // 帮助按钮
    animation: false, // 动画播放
    timeline: false, //时间轴
    fullscreenButton: false, // 全屏按
  })

  // 隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = 'none'

  // setView瞬间到达指定位置，视角
  // 生成的position是天安门的位置
  const position = Cesium.Cartesian3.fromDegrees(116.393428, 39.90923, 100)
  viewer.camera.setView({
    // 指定相机的位置
    destination: position,
    // 指定相机视角
    orientation: {
      // 指定相机的朝向
      heading: Cesium.Math.toRadians(0),
      // 指定相机的俯仰角 0度竖直向上，-90是垂直向下
      pitch: Cesium.Math.toRadians(-30),
      // 指定相机的滚转角
      roll: 0,
    },
  })

  // 通过按键控制移动相机
  document.addEventListener('keydown', e => {
    const key = e.key
    // 获取当前相机离地面的高度
    const height = viewer.camera.positionCartographic.height
    const moveRate = height / 100

    if (key === 'w') {
      // 设置向前移动
      viewer.camera.moveForward(moveRate)
    } else if (key === 's') {
      // 设置向后移动
      viewer.camera.moveBackward(moveRate)
    } else if (key === 'a') {
      // 设置向左移动
      viewer.camera.moveLeft(moveRate)
    } else if (key === 'd') {
      // 设置向右移动
      viewer.camera.moveRight(moveRate)
    } else if (key === 'q') {
      // 设置向左看
      viewer.camera.lookLeft(Cesium.Math.toRadians(0.1))
    } else if (key === 'e') {
      // 设置向右看
      viewer.camera.lookRight(Cesium.Math.toRadians(0.1))
    } else if (key === 'r') {
      // 设置向上看
      viewer.camera.lookUp(Cesium.Math.toRadians(0.1))
    } else if (key === 'f') {
      // 设置向下看
      viewer.camera.lookDown(Cesium.Math.toRadians(0.1))
    } else if (key === 'g') {
      // 左逆时针翻滚
      viewer.camera.twistLeft(Cesium.Math.toRadians(0.1))
    } else if (key === 'h') {
      // 右顺时针翻滚
      viewer.camera.twistRight(Cesium.Math.toRadians(0.1))
    }
  })
})
</script>
